<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="common/head :: head('')"/>
<link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.18.3}" rel="stylesheet"/>
<link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.7}" rel="stylesheet"/>
<link th:href="@{/css/eUpload.css?v=4.7.7}" rel="stylesheet"/>


<style>
    .index-header-search, .index-header-menus, .index-header-gray {
        display: none;
    }

    .fixed-table-toolbar {
        display: none;
    }

    .table th {
        font-weight: 500;

    }

    .table-bordered,
    .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
        border-color: #8B83C3;
    }

    .bootstrap-table .fixed-table-container .table thead th .th-inner {
        background-color: transparent;
    }

    .table th:nth-child(even), .table td:nth-child(even) {
        background-color: #E8E7F3;
    }

    .table > tbody > tr > td {
        font-size: 10px;
    }

    .app-wrap {
        height: 170px;
        margin-bottom: 30px;
    }

    .form-group-label {
        display: inline-block;
        margin-right: 10px;
    }

    .form-group-value {
        display: inline-block;
    }

    .simple-switch {
        position: relative;
        display: flex;
        height: 30px;
        border-radius: 20px;
        background: #778DFE;
        color: #FDFDFD;
        align-items: center;
        padding: 0 20px;
    }

    .switch-item {
        cursor: pointer;
        padding: 0 8px;
        transition: all .3s ease;
    }

    .switch-item + .switch-item {
        margin-left: 10px;
    }

    .switch-item.active {
        background-color: #3352F4;
        color: #FFF;
        border-radius: 20px;
    }

    .form-bottom {
        text-align: right;
    }

    .form-btn {
        display: inline-block;
        background-color: var(--color);
        color: #FFF;
        border-radius: 4px;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        border: 1px solid var(--color);
    }

    .form-btn + .form-btn {
        margin-left: 10px;
    }

    .form-btn.reset {
        background-color: #FFF;
        border: 1px solid;
        color: #333;
    }

    .link + .link {
        margin-left: 5px;
    }
</style>

<body>
<th:block th:include="common/head :: header('/')"/>

<div class="server-block page-main">
    <!-- <a class="server-block-back" href="/">
         <i class="fa fa-angle-left"></i>
         返回首页
     </a>-->
    <div class="server-block-left">
        <div class="server-block-menu server-block-top">
            <div class="server-block-menu__item is-active" rel="info">
                <span><img class="menu-img" src="/img/ico-d1.png" alt="情报"/>情报</span>
            </div>
            <div class="server-block-menu__item" rel="app">
                <span><img class="menu-img" src="/img/ico-d2.png" alt="APP"/>APP</span>
            </div>
            <div class="server-block-menu__item" rel="virus">
                <span>
                    <img class="menu-img" src="/img/ico-d3.png" alt="病毒"/>病毒
                </span>
            </div>
            <div class="server-block-menu__item" rel="dark">
                <span>
                    <img class="menu-img" src="/img/ico-d4.png" alt="暗网"/>暗网
                </span>
            </div>

            <div class="menu-bar" id="menuBar" style="left: 54.3047px;"></div>
        </div>

        <div class="server-block-content">
            <!-- 情报 -->
            <div class="server-block-sub info" style="display: block;">
                <div class="info-search">
                    <input id="searchContent" type="text" placeholder="请输入您想查询的内容"/>
                    <span id="searchInfoBtn">
                        <i class="fa fa-search"></i>
                    </span>
                </div>
                <div class="info-tip-title">搜索示例</div>

                <div class="info-examples" id="infoExamples">


                </div>
            </div>
            <div class="server-block-sub app">
                <div class="app-wrap">
                    <div id="appUpload"></div>
                </div>
                <div class="form-group">
                    <label class="form-group-label">操作系统：</label>
                    <div class="form-group-value">
                        <div class="simple-switch">
                            <div class="switch-item active">iOS系统</div>
                            <div class="switch-item">安卓系统</div>
                        </div>
                    </div>
                </div>
                <div class="form-bottom">
                    <button type="reset" class="form-btn reset" id="appReset">重置</button>
                    <div class="form-btn" id="appSubmit">确定</div>
                </div>
            </div>
            <div class="server-block-sub virus">
               <!-- <span class="pcc">病毒功能待完善中...</span>-->
                 <div class="app-wrap" >
                     <div id="virusUpload"></div>
                 </div>
                 <div class="form-group">
                     <label class="form-group-label">操作系统：</label>
                     <div class="form-group-value">
                         <div class="simple-switch">
                             <div class="switch-item active">windows</div>
                             <div class="switch-item">linux</div>
                             <div class="switch-item">android</div>
                         </div>
                     </div>
                 </div>
                 <div class="form-bottom">
                     <button type="reset" class="form-btn reset" id="virusReset">重置</button>
                     <div class="form-btn" id="virusSubmit">确定</div>
                 </div>
            </div>
            <div class="server-block-sub dark">
                <span class="pcc">暗网功能待完善中...</span>
            </div>
        </div>
    </div>
    <div class="server-block-right">
        <div class="server-block-top">用户信息</div>
        <div class="server-block-content server-user">
            <img onclick="onUserClick()" class="server-user-avatar"
                 th:src="${#strings.isEmpty(currentUser.avatar)  ? '/img/profile.jpg' : currentUser.avatar}"/>
            <div class="server-user-name" th:text="${currentUser.loginName}"></div>
            <a th:href="@{logout}" class="server-user-btn">退出登录</a>
            <div class="server-user-time">上次登录时间：<span
                    th:text="${#dates.format(currentUser.loginDate, 'yyyy/MM/dd')}"></span></div>
        </div>
    </div>
</div>

<div class="task-block page-main">
    <div class="common-block-title">
        <img class="common-block-title__ico" src="/img/open2.svg"/>
        <div class="common-block-title__txt">我的任务</div>
    </div>

    <div class="common-block-content">
        <div class="task-cards">
            <div class="task-card-item is-active" rel="detail_info">威胁情报</div>
            <div class="task-card-item " rel="detail_app">APP检测</div>
            <div class="task-card-item" rel="detail_virus">病毒溯源申请</div>
            <div class="task-card-item" rel="detail_dark">暗网监测申请</div>
        </div>
        <div class="task-table-wrap" id="detail_info" style="display: block;">
            <table id="info-table"></table>
        </div>
        <div class="task-table-wrap" id="detail_app">
            <table id="app-table"></table>
        </div>
        <div class="task-table-wrap" id="detail_virus">
            <table id="virus-table"></table>
        </div>
        <div class="task-table-wrap" id="detail_dark">
            <table id="dark-table"></table>
        </div>
    </div>
</div>


<th:block th:include="common/head :: link"/>
<th:block th:include="common/head :: footer"/>
<script src="/js/me/eUpload.js"></script>


<!-- bootstrap-table 表格插件 -->
<script th:src="@{/js/bootstrap.min.js?v=3.3.7}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.18.3}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.18.3}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.18.3}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.7}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0}"></script>
</body>
<script>
    $(function () {
        initInfoEvent()
        initAppEvent()
        initVirusEvent()

        $('.server-block-menu__item').on('mouseenter', function () {
            $('.server-block-menu__item').removeClass('is-active');
            $(this).addClass('is-active');
            const rel = $(this).attr('rel');
            $('.server-block-sub').hide();
            $('.' + rel).show()

            moveTo($(this).find('span'))
        })

        $('.task-card-item').click(function () {
            $('.task-card-item').removeClass('is-active');
            $(this).addClass('is-active');
            const rel = $(this).attr('rel');

            $('.task-table-wrap').hide();
            $('#' + rel).show()
            const tbId = rel.split('_')[1] + '-table'
            $.table.refresh(tbId)
        })

        initInfoTable()
        initAppTable()
        initVirusTable()
        initDarkTable()
    })

    function moveTo($el) {
        const left = $el[0].offsetLeft
        const width = $el.width()
        const $bar = $('#menuBar')
        let barWidth = $bar.width()
        if (barWidth < width) {
            barWidth = width + 10
        }
        const _left = left - (barWidth - width) / 2
        $bar.animate({left: _left + 'px'})
    }

    function initInfoTable() {
        const options = {
            id: "info-table",
            toolbar: null,
            url: ctx + 'cms/qb/listPage',
            pageSize: 5,
            sortName: 'create_time',
            sortOrder: 'desc',
            pageSize: 5,
            columns: [
                {field: 'id', visible: false},
                {field: 'type', align: 'center', title: '搜索类型', width: 150},
                {field: 'content', align: 'center', title: '搜索内容', width: 200},
                {field: 'createTime', align: 'center', title: '搜索时间', width: 160},
                {field: 'ctrl', align: 'center', title: '操作', width: 160, formatter: function(value, row) {
                        const actions = []

                        actions.push('<a class="link" onclick="onQbDetail(' + row.id + ')">查看详情</a>')
                        actions.push('<a class="link" onclick="deleteQb(' + row.id + ')">删除</a>')

                        return actions.join('')

                    }
                }
            ]
        }

        $.table.init(options)
        // $('#info-table').bootstrapTable('load', {total: 10, rows: rows})
    }

    function initAppTable() {
        const statusMap = {
            0: '初始',
            1: '开始',
            2: '成功',
            3: '失败'
        }
        const options = {
            id: "app-table",
            toolbar: null,
            url: ctx + 'cms/app/listPage',
            pageSize: 5,
            sortName: 'create_time',
            sortOrder: 'desc',
            // queryParams: {
            //     pageSize: 5,
            //     orderByColumn: 'create_time',
            //     isAsc: 'desc'
            // },
            columns: [
                {field: 'id', visible: false},
                {field: 'name', align: 'center', title: '文件名称', width: 160},
                {field: 'appName', align: 'center', title: '应用名称', width: 160},
                {field: 'packName', align: 'center', title: '应用包名', width: 210},
                {field: 'version', align: 'center', title: '版本', width: 100},
                {field: 'size', align: 'center', title: '应用大小', width: 80},
                {field: 'createTime', align: 'center', title: '提交时间', width: 160},
                {
                    field: 'status', align: 'center', title: '状态', formatter: function (value, row) {
                        return statusMap[value]
                    }
                },
                {
                    field: 'ctrl', align: 'center', title: '操作', width: 160, formatter: function (value, row) {
                        const actions = []

                        actions.push('<a class="link" onclick="onAppDetail(' + row.id + ')">查看结果</a>')
                        actions.push('<a class="link" onclick="downAppPdf(' + row.id + ')">下载报告</a>')
                        actions.push('<a class="link" onclick="deleteApp(' + row.id + ')">删除</a>')

                        return actions.join('')
                    }
                }
            ]
        }

        $.table.init(options)
    }

    function initVirusTable() {
        const options = {
            id: "virus-table",
            toolbar: null,
            url: ctx + 'cms/sandbox/listPage',
            pageSize: 5,
            sortName: 'create_time',
            sortOrder: 'desc',
            columns: [
                {field: 'id', visible: false},
                {field: 'fileName', align: 'center', title: '文件名称', width: 180},
                {field: 'fileType', align: 'center', title: '文件类型', width: 100},
                {field: 'os', align: 'center', title: '目标平台', width: 100},
                {field: 'createTime', align: 'center', title: '提交时间', width: 110},
                {field: 'ctrl', align: 'center', title: '操作', width: 160, formatter: function(val, row) {
                        const actions = []

                        actions.push('<a class="link" onclick="onVirusDetail(' + row.id + ')">查看结果</a>')
                        actions.push('<a class="link" onclick="deleteVirus(' + row.id + ')">删除</a>')
                        return actions.join('')
                    }
                }
            ]
        }

        $.table.init(options)


    }

    function initDarkTable() {
        const options = {
            id: "dark-table",
            toolbar: null,
            pageSize: 5,
            columns: [
                {field: 'id', visible: false},
                {field: 'applyTime', align: 'center', title: '申请时间', width: 110},
                {field: 'serverType', align: 'center', title: '服务类型', width: 100},
                {field: 'description', align: 'center', title: '申请描述', width: 300},
                {field: 'backTime', align: 'center', title: '反馈时间', width: 100},
                {field: 'state', align: 'center', title: '状态', width: 80},
                {field: 'ctrl', align: 'center', title: '操作', width: 160}
            ]
        }

        $.table.init(options)

        const rows = [
            {}, {}, {}, {}
        ]

        $('#dark-table').bootstrapTable('load', {total: 10, rows: rows})
    }

    function onUserClick() {
        window.open(ctx + 'main')
    }

    function initInfoEvent() {
        const examples = [
            {"attr": "IP", "label": "63.251.106.25", "type": "ip"},
            {"attr": "域名", "label": "freescanonline.com", "type": "domain"},
            {"attr": "网址", "label": "https://fhcp57.com/fhcp", "type": "url"},
            {"attr": "文件HASH", "label": "6cd7b91212983cc557c6e3e671734ff9", "type": "file"},
            {"attr": "MD5", "label": "6983f7001de10f4d19fc2d794c3eb534", "type": "file"},
            {"attr": "sha1", "label": "0c069b0e9a687b7b631d96c7df12fc5225b77f5f", "type": "file"},
            {
                "attr": "sha256",
                "label": "5f20167df58447f59307901a0b1b9de2499a7c36c88c7a63e98f45ef70a7933a",
                "type": "file"
            },
            {
                "attr": "SM3特征",
                "label": "sm3:a35849715885addbc038720835abdaa26b0fc6603df2f672f202a8af2347db64",
                "type": "file"
            },
            {"attr": "漏洞编号", "label": "CVE-2021-27065", "type": "cve"},
            {"attr": "证书指纹", "label": "8328b3c3fd8f302da0a35ff41999c808b8a60be7", "type": "cert"},
            {"attr": "病毒家族", "label": "Win32/Virus.Ramnit", "type": "virus"},
            {"attr": "恶意组织", "label": "海莲花", "type": "apt"},
        ]

        const htmls = []
        examples.forEach((item, index) => {
            htmls.push('<div class="info-examples__item" type="'+item.type+'" label="'+ item.label +'"><span>'+(index + 1)+'</span>'+ item.attr +'示例:' + item.label + '</div>')
        })
        $('#infoExamples').html(htmls.join(''))

        $('#infoExamples').on('click', '.info-examples__item', function() {
            const type = $(this).attr('type')
            const label = $(this).attr('label')

            $('#searchContent').val(type + ':' + label)
        })

        $('#searchInfoBtn').click(function () {
            const val = $('#searchContent').val()
            if (val.length == 0) {
                $.modal.msg('请输入搜索内容')
                return
            }

            if (val.indexOf(':') == -1) {
                $.modal.msg('请输入正确格式内容，如示例所示！')
                return
            }
            const index = val.indexOf(':')

            const type = val.substr(0, index)
            const value = val.substr(index + 1)
            $.get(ctx + 'cms/qb/wxqbQuery', {
                type: type,
                value: value
            }, function (res) {
                if (res.code !== 0) {
                    $.modal.alert(res.msg)
                    return
                }

                const token = res.data.token
                const appid = res.data.appid
                const url = 'https://sc.360.net/' + type + '/' + value + '?sc_app=' + appid + '&sc_token=' + token
                console.info(url)
                $.table.refresh('info-table')
                window.open(url)
            })
        })
    }

    // app事件
    function initAppEvent() {
        $('#appUpload').eUpload()
        const eupload = $('#appUpload').data('eupload')

        $('.app .switch-item').on('click', function () {
            $(this).parent().find('.switch-item').removeClass('active')
            $(this).addClass('active')
        })

        $('#appReset').click(function () {
            $('.app .switch-item').removeClass('active')
            $('.app .switch-item').eq(0).addClass('active')
            eupload.clear()
        })

        $('#appSubmit').click(function () {
            const file = eupload.getFile()
            if (!file) {
                $.modal.alert('请先选择文件!')
                return
            }
            const fname = file.name
            const arr = fname.split('.')
            const ftype = arr[arr.length - 1]

            let lx = $('.app .switch-item.active').html()
            let suffix = 'apk'

            if (lx.indexOf('iOS') > -1) {
                suffix = 'ipa'
                lx = 'ipa'
            } else {
                lx = 'apk'
            }

            if (ftype.toUpperCase() != suffix.toUpperCase()) {
                $.modal.alert('请上传后缀为' + suffix + '的文件！')
                return
            }

            const formData = new FormData()
            formData.append('lx', lx)
            formData.append('file', file)

            $.modal.loading('App上传中')
            $.ajax({
                url: ctx + 'cms/app/uploadApp',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    $.modal.closeLoading()
                    $.modal.alert(res.msg)
                    eupload.clear()
                    $.table.refresh('app-table')
                }
            })
        })
    }

    function initVirusEvent() {
        $('.virus .switch-item').on('click', function () {
            $(this).parent().find('.switch-item').removeClass('active')
            $(this).addClass('active')
        })

        $('#virusUpload').eUpload()
        const eupload = $('#virusUpload').data('eupload')


        $('#virusReset').click(function () {
            $('.virus .switch-item').removeClass('active')
            $('.virus .switch-item').eq(0).addClass('active')
            eupload.clear()
        })

        const maxSize = 20 * 1024 * 1024

        $('#virusSubmit').click(function () {
            const file = eupload.getFile()
            if (!file) {
                $.modal.alert('请先选择文件!')
                return
            }

            const size = file.size
            if(size > maxSize) {
                $.modal.alert(`文件大小不能超过20MB,该文件${size/1024/1024}MB`)
                return
            }

            let os = $('.virus .switch-item.active').html()
            const formData = new FormData()
            formData.append('os', os)
            formData.append('file', file)

            return

            $.modal.loading('App上传中')
            $.ajax({
                url: ctx + 'cms/sandbox/uploadApp',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    $.modal.closeLoading()
                    $.modal.alert(res.msg)
                    eupload.clear()
                    $.table.refresh('virus-table')
                }
            })
        })
    }

    // APP下载文件
    function downAppPdf(appId) {
        window.open(ctx + 'cms/app/pdf?id=' + appId, '_blank')
    }

    function deleteApp(appId) {
        $.modal.confirm('确定删除这条数据吗?', function () {
            $.post(ctx + 'cms/app/remove', {ids: appId}, function (res) {
                $.table.refresh('app-table')
            })
        })
    }

    function onAppDetail(id) {
        window.location.href = ctx + 'serve/appDetails/' + id
    }

    // 情报详情
    function onQbDetail(id) {
        const rows = $('#info-table').bootstrapTable('getData')
        const find = rows.find(o => o.id == id)
        if(!find) return
        const type = find.type
        const content = find.content

        $('#searchContent').val(type + ':' + content)
        $('#searchInfoBtn').click()
    }

    function deleteQb(id) {
        $.modal.confirm('确定删除这条数据吗?', function () {
            $.post(ctx + 'cms/qb/remove', {ids: id}, function (res) {
                $.table.refresh('info-table')
            })
        })
    }

    function onVirusDetail(id) {
        window.location.href = ctx + 'serve/sandboxDetails/' + id
    }

    function deleteVirus(id) {
        $.modal.confirm('确定删除这条数据吗?', function () {
            $.post(ctx + 'cms/sandbox/remove', {ids: id}, function (res) {
                $.table.refresh('virus-table')
            })
        })
    }
</script>
</html>